<template>

  <div style="width: 100%;height: 1600px">
    <div
      style="line-height: 30px ;width: 950PX; height: 1300px;background-color:#d2d0d0;margin: 0 auto;box-sizing: border-box;border: 2px solid black">

      <!--    顶部导航栏   -->
      <div style=" ;width: 950px;display: inline-block;box-sizing: border-box;">
        <div style="margin: 20px auto;width: 100%;height: 10px;"></div>
        <h1 style="width:100%; text-align: center;color: blue;font-weight: bold;">个人健康档案</h1>
        <hr>
        <div class="div-span">
          <span>姓名：{{ worldData.userName }}</span><span>性别：{{
            worldData.gender
          }}</span><span>出生年月：{{ worldData.birthday }}</span><span>年龄：{{ worldData.age }}</span>
        </div>
        <hr>
        <div class="div-span">
          <span>监护人名称：{{ worldData.parentName }}</span>
          <span>监护人身份：{{ worldData.sFen }}</span>
          <span>联系方式：{{ worldData.telephone }}</span>
        </div>
        <hr>

        <div class="div-span">
          <span>既往病史：{{ worldData.bingShi }}</span>
        </div>
      </div>
      <hr>

      <!--    五官    -->
      <div
        style="width: 100px;display: inline-block;box-sizing: border-box;margin-left:50px;">
        五官
      </div>
      <div style=" ;width: 750px;display: inline-block;box-sizing: border-box;border: 1px solid black">
        <div>
          <!--     视力       -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">视力</div>
            <div style="display: inline-block; border: 1px solid black;width: 100px">
              <p>左</p>
              <hr>
              <p>{{ worldData.shiLi }}</p>
              <hr>
              <p>右</p>
              <hr>
              <p>{{ worldData.shiLi }}</p>
            </div>
            <div style="display: inline-block;width: 100px">矫正视力</div>
            <div style="display: inline-block;border: 1px solid black;width: 100px">
              <p>左</p>
              <hr>
              <p>{{ worldData.jZShiLi }}</p>
              <hr>
              <p>右</p>
              <hr>
              <p>{{ worldData.jZShiLi }}</p>
            </div>
            <div style="display: inline-block;width: 100px">其他眼疾</div>
            <div style="display: inline-block;width: 100px">{{ worldData.yanJi }}</div>
          </div>
          <!--      色觉检查      -->
          <div>
            <div style="border: 1px solid black">
              <div style="display: inline-block;width: 100px">色觉检查</div>
              <div style="display: inline-block; border: 1px solid black;width: 200px">
                <p>彩色图案及编辑</p>
                <hr>
                <p>单色识别</p>
              </div>
              <div style="display: inline-block;width: 200px">
                <p>{{ worldData.seJueBM }}</p>
                <hr>
                <p>{{ worldData.seJueSB }}</p>
              </div>
            </div>
          </div>
          <!--      鼻      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">鼻</div>
            <div style="display: inline-block;width: 100px">{{ worldData.biDou }}</div>
          </div>
          <!--      喉咙      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">喉咙</div>
            <div style="display: inline-block;width: 100px">{{ worldData.yanHou }}</div>
          </div>
          <!--      口腔      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">口腔</div>
            <div style="display: inline-block;width: 100px">{{ worldData.kouQiang }}</div>
          </div>
          <!--      其他      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">其他</div>
            <div style="display: inline-block;width: 100px">{{ worldData.other }}</div>
          </div>
        </div>


      </div>
      <hr>

      <!--    外科    -->
      <div
        style="width: 100px;display: inline-block;box-sizing: border-box;margin-left:50px;">
        外科
      </div>
      <div
        style=" ;width: 750px;display: inline-block;box-sizing: border-box;border: 1px solid black">
        <div>
          <!--      身高      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">身高</div>
            <div style="display: inline-block;width: 100px">{{ worldData.sGao }}</div>
          </div>
          <!--      腰围      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">腰围</div>
            <div style="display: inline-block;width: 100px">{{ worldData.yaoWei }}</div>
          </div>
          <!--      四肢      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">四肢</div>
            <div style="display: inline-block;width: 100px">{{ worldData.siZhi }}</div>
          </div>
        </div>
      </div>
      <hr>

      <!--    内科    -->
      <div
        style="width: 100px;display: inline-block;box-sizing: border-box;margin-left:50px;">
        内科
      </div>
      <div
        style=" ;width: 750px;display: inline-block;box-sizing: border-box;border: 1px solid black">
        <div>
          <!--      发育营养      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">发育营养</div>
            <div style="display: inline-block;width: 100px">{{ worldData.faYu }}</div>
          </div>
          <!--      腹及呼吸道      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">腹及呼吸道</div>
            <div style="display: inline-block;width: 100px">{{ worldData.hxDao }}</div>
          </div>
          <!--      心脏及血管      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">心脏及血管</div>
            <div style="display: inline-block;width: 100px">{{ worldData.xinZhang }}</div>
          </div>
          <!--      腹部器官-脾      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">腹部器官-脾</div>
            <div style="display: inline-block;width: 100px">{{ worldData.fBuPi }}</div>
          </div>
          <!--      腹部器官-肝      -->
          <div style="border: 1px solid black">
            <div style="display: inline-block;width: 100px">腹部器官-肝</div>
            <div style="display: inline-block;width: 50px">{{ worldData.fBuGan }}</div>
          </div>
        </div>
      </div>
      <hr>

      <!--    其他检查    -->
      <div
        style="width: 100px;display: inline-block;box-sizing: border-box;margin-left:50px;">
        其他检查
      </div>
      <div
        style=" ;width: 750px;display: inline-block;box-sizing: border-box;border: 1px solid black">
        <div>
          <p>{{ worldData.other }}</p>
        </div>
      </div>
      <hr>

      <!--    备注    -->
      <div
        style="width: 100px;display: inline-block;box-sizing: border-box;margin-left:50px;">
        备注
      </div>
      <div
        style=" ;width: 750px;display: inline-block;box-sizing: border-box;border: 1px solid black">
        <div>
          <p>{{ worldData.other }}</p>
        </div>
      </div>
      <hr>
    </div>
  </div>
</template>

<script>

import {listReporting, listReporting1} from "@/api/report/reporting";

export default {
  name: "Reporting",
  data() {
    return {
      worldData: [],
      queryParams: {
        username: 1,
        id: 0
      },
      form: {},
    };
  },
  created() {
    this.getList();

    this.getWorldDataList(this.$route.query.index)

  },
  methods: {
    /** 查询档案列表 */
    getList() {
      listReporting(this.queryParams).then(response => {
        this.form = response.rows
      });
    },
    getWorldDataList(id) {
      this.queryParams.id = id
      listReporting1(this.queryParams).then(response => {
        this.worldData = response
        console.log('response==>', response)
      });
    }
  }
};
</script>

<style>
.div-span > span {
  margin: 0 50px;
}
</style>
